<template>
  <div class="settlement_unit">
    <div class="header" v-if="isauth('merchant_edit')">
      <el-button icon="el-icon-plus" size="mini" type="primary" @click="addsettlementunit">增加</el-button>
    </div>
    <el-row class="table" type="flex" :gutter="20">
      <el-col :span="24">
        <div class="lefttableone">
          <el-row :gutter="20">
            <el-col :span="24" class="lefttableonecol">
              <div class="tabletitle">结算单位</div>
              <el-table
                :data="data1"
                highlight-current-row
                @row-click="rowClick"
                border
                ref="selection"
                style="width: 100%"
                :header-cell-style="headFirst"
                :cell-style="(res) => headFirst_col(res, [])"
              >
                <!-- <el-table-column type="selection" width="40"> </el-table-column> -->
                <el-table-column prop="merchantName" label="结算单位名称"></el-table-column>
                <el-table-column prop="parentMerchantName" label="上级单位"></el-table-column>
                <el-table-column prop="consumeWalletName" label="消费钱包名"></el-table-column>
                <el-table-column label="操作" v-if="isauth('merchant_edit')">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="accountManagement(scope.row)">账号管理</el-button>
                    <el-button type="text" size="mini" @click="editUserForm(scope.row)">修改</el-button>
                    <el-button
                      type="text"
                      size="mini"
                      style="color:red"
                      @click="deleteUser(scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="page">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChangepage"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="recordCount"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <div style="margin-top:-40px">
      <el-row class="table" type="flex" :gutter="24">
        <el-col :span="9" class="lefttableonecol">
          <div class="lefttabletwo">
            <el-col :span="24" class="lefttableonecol">
              <div class="tabletitle">未分配消费机</div>
              <el-table
                :data="data3"
                border
                ref="selection"
                @selection-change="checkRightAll"
                :header-cell-style="headFirst"
                style="width: 100%"
                :cell-style="(res) => headFirst_col(res, [])"
              >
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column prop="terminalCode" label="设备编号"></el-table-column>
                <el-table-column prop="terminalModelName" label="设备型号"></el-table-column>
                <el-table-column prop="remark" label="位置"></el-table-column>
              </el-table>
              <div class="page">
                <el-pagination
                  @size-change="handleSizeChange3"
                  @current-change="handleCurrentChangepage3"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="pageSize3"
                  layout="total, prev, pager, next, jumper"
                  :total="recordCount3"
                ></el-pagination>
              </div>
            </el-col>
          </div>
        </el-col>
        <el-col :span="3" v-if="isauth('merchant_edit')">
          <div @click="handelSelect" class="lincenterleft">
            <el-button
              icon="el-icon-d-arrow-right"
              :disabled="
                    nowSelectRightData.length > 0 && merchantGuid != ''
                      ? false
                      : true
                  "
              :size="buttonSize"
              type="primary"
            >添加所选</el-button>
          </div>
          <div class="lincenterright" @click="handleRemoveSelect">
            <el-button
              icon="el-icon-d-arrow-left"
              :disabled="
                    nowSelectData.length > 0 && merchantGuid != ''
                      ? false
                      : true
                  "
              :size="buttonSize"
              type="primary"
            >移除所选</el-button>
          </div>
        </el-col>
        <el-col :span="12" class="lefttableonecol">
          <div class="lefttabletwo">
            <el-col :span="24" class="lefttableonecol">
              <div class="tabletitle">已分配消费机</div>
              <el-table
                :data="data2"
                border
                ref="selection"
                @selection-change="checkAll"
                :header-cell-style="headFirst"
                style="width: 100%"
                :cell-style="(res) => headFirst_col(res, [])"
              >
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column prop="terminalName" label="窗口名称"></el-table-column>
                <el-table-column prop="terminalCode" label="设备编号"></el-table-column>
                <el-table-column prop="terminalModelName" label="设备型号"></el-table-column>
                <el-table-column prop="remark" label="位置"></el-table-column>
              </el-table>
              <div class="page">
                <el-pagination
                  @size-change="handleSizeChange2"
                  @current-change="handleCurrentChangepage2"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="pageSize2"
                  layout="total, prev, pager, next, jumper"
                  :total="recordCount2"
                ></el-pagination>
              </div>
            </el-col>
          </div>
        </el-col>
      </el-row>
    </div>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="unitmerchantpage"></add-or-update>
    <div class="unit">
      <!-- 缴费项目人员管理 -->
      <el-dialog
        :before-close="eidtcloseDialog"
        width="900px"
        center
        :title="'结算单位账户管理'+'（'+editPayInfo.merchantName+ '）'"
        :close-on-click-modal="false"
        :visible.sync="eidtDialogFormVisible"
      >
        <div>
          <el-form :model="editForm" ref="editForm" class="demo-ruleForm" :inline="true">
            <el-form-item label-width="140px">
              <el-button
                type="primary"
                @click="bindAccount"
                size="mini"
                style="margin-bottom: 10px"
                icon="el-icon-plus"
              >账号绑定</el-button>
            </el-form-item>
          </el-form>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :stripe="true"
            border
            :header-cell-style="headFirst"
            :cell-style="(res) => headFirst_col(res, [])"
          >
            <!-- <el-table-column type="selection" width="45" align="center"></el-table-column> -->
            <el-table-column prop="userName" label="账号名称" align="center"></el-table-column>
            <el-table-column prop="loginName" label="登录名" align="center"></el-table-column>
            <el-table-column prop="isDelete" label="是否禁用" align="center">
              <template slot-scope="scope">{{scope.row.isDelete == 1?'禁用':'未禁用'}}</template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click.stop="deletePay(scope.row)"
                  size="small"
                  style="color: red"
                >移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>

      <div class="person">
        <el-dialog
          width="600px"
          center
          :before-close="closeDialog"
          title="商户添加账号"
          :close-on-click-modal="false"
          :visible.sync="addDialogFormVisible"
        >
          <!-- style="margin-left: -80px" -->
          <el-table
            ref="multipleTable"
            :data="accountList"
            tooltip-effect="dark"
            style="width: 100%"
            :stripe="true"
            border
            :header-cell-style="headFirst"
            @selection-change="handleSelectionChange"
            :cell-style="(res) => headFirst_col(res, [])"
            height="calc(100vh - 15vh - 280px)"
          >
            <!-- <el-table-column type="selection" width="45" align="center"></el-table-column> -->
            <el-table-column prop="userName" label="账号名称" align="center"></el-table-column>
            <el-table-column prop="loginName" label="登录名" align="center"></el-table-column>
            <el-table-column prop="isDelete" label="是否禁用" align="center">
              <template slot-scope="scope">{{scope.row.isDelete == 1?'禁用':'未禁用'}}</template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click.stop="addataFormSubmit(scope.row)" size="small">绑定</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- <span slot="footer" class="dialog-footer">
            <el-button @click="closeDialog()">取消</el-button>
            <el-button type="primary" @click="addataFormSubmit()">确定</el-button>
          </span>-->
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import AddOrUpdate from './ssettlement-unit-add-update'
export default {
  data() {
    return {
      addOrUpdateVisible: false,
      selectArr: [], // 右边列表
      buttonSize: 'mini',
      options: [],
      value: '',
      data1: [],
      pageSize: 5,
      pageNum: 1,
      searchInfo: {},
      recordCount: 0,
      currentPage: 1,

      //分配消费机查询
      data2: [],
      pageSize2: 10,
      pageNum2: 1,
      searchInfo2: {},
      recordCount2: 0,
      currentPage2: 1,

      //未分配消费机查询
      data3: [],
      pageSize3: 10,
      pageNum3: 1,
      searchInfo3: {},
      recordCount3: 0,
      currentPage3: 1,

      nowSelectData: [], // 左边选中列表数据
      nowSelectRightData: [], // 右边选中列表数据

      merchantGuid: '',
      /**
       * 商户账号
       */
      // 当前需要修改缴费项目的信息
      editForm: {},
      editPayInfo: {},
      // 缴费项目中的人员信息
      tableData: [],
      // 缴费项目人员管理弹框
      eidtDialogFormVisible: false,
      /** 账号 */
      addDialogFormVisible: false,
      accountList: [],
      // 选中账号
      selectAccount: []
    }
  },
  components: {
    AddOrUpdate
  },
  created() {
    this.operatorGuid = sessionStorage.getItem('administrator')
  },
  mounted() {
    this.unitmerchantpage()
    this.unassignedmerchantterminalinfo()
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  methods: {
    // 选中账号
    handleSelectionChange(val) {
      this.selectAccount = []
      for (var i = 0; i < val.length; i++) {
        this.selectAccount.push(val[i].userGuid)
      }
    },
    // 添加账号
    bindAccount() {
      console.log(this.editPayInfo)
      this.selectAccount = []
      this.getUnboundAccount()
      this.addDialogFormVisible = true
    },
    closeDialog() {
      this.accountList = []
      this.addDialogFormVisible = false
    },
    // 查询未绑定账号
    getUnboundAccount() {
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/merchant/unit-merchant-unbind-user-search'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            merchantGuid: this.editPayInfo.merchantGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.accountList = data.messageContent || []
          if (this.accountList.length == 0) {
            this.$message({
              message: '查询成功,该商户暂无可绑定账号',
              type: 'success'
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 添加账号
    addataFormSubmit(row) {
      console.log(this.editPayInfo)
      this.$http({
        url: this.$http.adornUrl('/terminal/merchant/unit-merchant-bind-user'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            merchantGuidList: [this.editPayInfo.merchantGuid],
            operatorGuid: this.operatorGuid,
            unitGuid: this.changeschoolid,
            userGuid: row.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.$message({
            message: '绑定成功',
            type: 'success'
          })
          // this.getUnboundAccount()
          this.getPayPeople()
          this.closeDialog()
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 删除账号
    deletePay(row) {
      this.$confirm('此操作将永久移除此账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(
              '/terminal/merchant/unit-merchant-unbind-user'
            ),
            method: 'post',
            data: this.$http.adornData({
              messageContent: {
                merchantGuid: this.editPayInfo.merchantGuid,
                operatorGuid: this.operatorGuid,
                unitGuid: this.changeschoolid,
                userGuidList: [row.userGuid]
              },
              messageType: 0
            })
          }).then(({ data }) => {
            console.log(data)
            if (data.messageCode == 200) {
              this.$message({
                message: '解绑成功',
                type: 'success'
              })
              this.getPayPeople()
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        })
        .catch(() => {})
    },
    // 查询未绑定

    /**
     * 商户账号管理
     */
    accountManagement(row) {
      // 当前修改的缴费项目信息
      this.editPayInfo = row
      this.$set(this.editForm, 'paymentName', row.paymentName)
      this.payForm = {
        userName: '',
        paymentState: 0
      }
      this.PaypageNum = 1
      this.getPayPeople()
      this.eidtDialogFormVisible = true
    },
    eidtcloseDialog(done) {
      this.eidtDialogFormVisible = false
      done()
    },
    // 缴费项目绑定人员查询
    getPayPeople() {
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/merchant/unit-merchant-bind-user-search'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            merchantGuid: this.editPayInfo.merchantGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.tableData = data.messageContent || []
          if (this.tableData.length == 0) {
            this.$message({
              message: '查询成功,该商户暂未绑定账号',
              type: 'success'
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },

    //结算单位列表点击事件
    rowClick(row) {
      console.log(row)
      this.merchantGuid = row.merchantGuid
      this.merchantterminalinfo(row)
    },
    // 结算单位新增
    addsettlementunit() {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init()
      })
    },
    checkAll(val) {
      this.nowSelectData = []
      let Arr = val
      for (var i = 0; i < Arr.length; i++) {
        this.nowSelectData.push({
          terminalGuid: Arr[i].terminalGuid,
          terminalType: Arr[i].terminalType
        })
      }
      console.log(this.nowSelectData)
    },
    checkRightAll(val) {
      this.nowSelectRightData = []
      let Arr = val
      for (var i = 0; i < Arr.length; i++) {
        this.nowSelectRightData.push({
          terminalGuid: Arr[i].terminalGuid,
          terminalType: Arr[i].terminalType
        })
      }
      console.log(this.nowSelectRightData)
    },
    // 绑定设备
    handelSelect() {
      // this.selectArr = this.handleConcatArr(this.selectArr, this.nowSelectData);
      // this.handleRemoveTabList(this.nowSelectData, this.data1);
      // this.nowSelectData = [];
      // if (this.merchantGuid == "" || this.nowSelectRightData.length = 0) {
      //   return false;
      // }
      if (this.merchantGuid == '' || this.nowSelectRightData.length == 0) {
        return
      }
      this.consumeterminalmerchant()
    },
    // 移除设备
    handleRemoveSelect() {
      // this.nowSelectRightData = [];
      if (this.merchantGuid == '' || this.nowSelectData.length == 0) {
        return
      }
      this.unbindconsumetmerchant()
    },
    handleConcatArr(selectArr, nowSelectData) {
      let arr = []
      arr = arr.concat(selectArr, nowSelectData)
      return arr
    },
    handleRemoveTabList(isNeedArr, originalArr) {
      if (isNeedArr.length && originalArr.length) {
        for (let i = 0; i < isNeedArr.length; i++) {
          for (let k = 0; k < originalArr.length; k++) {
            if (isNeedArr[i]['name'] === originalArr[k]['name']) {
              originalArr.splice(k, 1)
            }
          }
        }
      }
    },
    // 结算单位信息分页查询
    unitmerchantpage() {
      this.addOrUpdateVisible = false
      this.searchInfo.unitGuid = this.changeschoolid
      this.$http({
        url: this.$http.adornUrl('/terminal/merchant/unit-merchant-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.data1 = data.messageContent.data
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.unitmerchantpage()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.unitmerchantpage()
    },
    //修改结算单位
    editUserForm(row) {
      console.log(row)
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.eidtinit(row)
      })
    },
    //删除结算单位
    deleteUser(row) {
      this.$confirm('此操作将删除改结算单位信息 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log(row)
          this.deletunitmerchant(row.merchantGuid, row.unitGuid)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //结算单位删除
    deletunitmerchant(id, unitGuid) {
      this.$http({
        url: this.$http.adornUrl('/terminal/merchant/unit-merchant-delete'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            merchantGuid: id,
            unitGuid: unitGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.unitmerchantpage()
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //设备简要信息分页查询
    merchantterminalinfo(row) {
      if (row !== undefined) {
        this.searchInfo2.merchantGuid = row.merchantGuid
        this.searchInfo2.unitGuid = row.unitGuid
      } else {
        this.searchInfo2.merchantGuid = this.merchantGuid
        this.searchInfo2.unitGuid = this.changeschoolid
      }

      this.searchInfo2.terminalType = '1'
      this.$http({
        url: this.$http.adornUrl('/terminal/merchant/terminal-info-brief-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum2,
            pageSize: this.pageSize2,
            searchInfo: this.searchInfo2
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.data2 = data.messageContent.data
          this.recordCount2 = data.messageContent.recordCount
          this.currentPage2 = data.messageContent.pageNum
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //
    handleCurrentChangepage2(val) {
      this.pageNum2 = val
      if (this.merchantGuid != '') {
        this.merchantterminalinfo()
      }
    },
    //
    handleSizeChange2(val) {
      this.pageSize2 = val
      if (this.merchantGuid != '') {
        this.merchantterminalinfo()
      }
    },
    //未分配消费机
    unassignedmerchantterminalinfo() {
      this.searchInfo3.unitGuid = this.changeschoolid
      this.searchInfo3.terminalType = '1'
      this.$http({
        url: this.$http.adornUrl('/terminal/merchant/terminal-info-brief-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum3,
            pageSize: this.pageSize3,
            searchInfo: this.searchInfo3
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.data3 = data.messageContent.data
          this.recordCount3 = data.messageContent.recordCount
          this.currentPage3 = data.messageContent.pageNum
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //
    handleSizeChange3(val) {
      this.pageSize3 = val
      this.unassignedmerchantterminalinfo()
    },
    handleCurrentChangepage3(val) {
      this.pageNum3 = val
      this.unassignedmerchantterminalinfo()
    },
    //消费机设备绑定结算单位
    consumeterminalmerchant() {
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/merchant/bind-consume-terminal-merchant'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            merchantGuid: this.merchantGuid,
            terminalInfoKeyList: this.nowSelectRightData,
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.$message({
            message: '绑定成功',
            type: 'success'
          })
          this.unassignedmerchantterminalinfo()
          this.merchantterminalinfo()
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //消费机移除绑定结算单位
    unbindconsumetmerchant() {
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/merchant/unbind-consume-terminal-merchant'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            merchantGuid: this.merchantGuid,
            terminalInfoKeyList: this.nowSelectData,
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.$message({
            message: '移除绑定成功',
            type: 'success'
          })
          this.merchantterminalinfo()
          this.unassignedmerchantterminalinfo()
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.settlement_unit {
  padding: 5px;
  .unit {
    .el-form-item {
      margin-bottom: 0;
    }
    /deep/.el-dialog--center .el-dialog__body {
      padding: 20px;
      padding-top: 0;
    }
  }
  .header {
    height: 40px;
    background-color: #f2f6fc;

    border-bottom: 1px solid #e5e9f2;
    display: flex;
    align-items: center;
    padding: 0px 10px;
  }
  .lefttableonecol {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .table {
    padding: 10px 10px;
    height: 100%;
    // /deep/.el-button--mini, .el-button--mini.is-round{
    //   padding:7px;
    // }
    .lefttableone,
    .lefttabletwo {
      margin-bottom: 30px;
      .lefttableonecol {
        padding-top: 10px;
        border: 2px solid #e5e9f2;
        padding-left: 5px !important;
        padding-right: 5px !important;
      }
      .tabletitle {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #909399;
      }
    }
    .lincenter {
      text-align: center;
      height: 100%;
    }
    .righttableone {
      .tabletitle {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #909399;
      }
    }
    .lincenterleft,
    .lincenterright {
      margin-top: 50px;
    }
  }
  // .opSetting {
  //   > div:nth-child(1) {
  //     margin-bottom: 10px;
  //   }
  //   text-align: center;
  //   margin-top: 30px;
  // }
  .spacing {
    margin-top: 10px;
  }
  .page.page2 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .page3 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .page {
    padding-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
